<template>
  <TemplateTitle titleName="各厂日均水量对比"></TemplateTitle>
  <div class="chart">
    <chart-line-bar
      :chartData="chartDataList"
      xAxisName="month"
      :option="option"
      :chartType="chartType"
      :twoYAxis="false"
      :unit="unit"
      :orient="'horizontal'"
    ></chart-line-bar>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/TemplateTitle.vue";

import homeHttp from "@/https/home.js";
import { onMounted, ref, watch, inject } from "vue";
import ChartLineBar from "./charts/ChartLineBar.vue";
import moment from "moment";

const chartDataList = ref();
const option = ref({});
const chartType = ref([
  {
    type: "line",
    code: "companyWaterYield",
    name: "总公司",
    linerColor: ["#3ea7ea", "#3ea7ea"],
  },
  {
    type: "line",
    code: "xingshaWaterYield",
    name: "星沙厂",
    linerColor: ["#e33dff", "#e33dff"],
  },
  {
    type: "line",
    code: "cityNorthWaterYield",
    name: "城北厂",
    linerColor: ["#ffc550", "#ffc550"],
  },
  {
    type: "line",
    code: "citySouthWaterYield",
    name: "城南厂",
    linerColor: ["#b2e3e8", "#b2e3e8"],
  },
  {
    type: "line",
    code: "cityWestWaterYield",
    name: "城西厂",
    linerColor: ["#85cc18", "#85cc18"],
  },
]);
const unit = ref(["单位:万吨/日"]);

onMounted(() => {
  queryDailyWaterAvg(moment().format("YYYY"));
});
const year = inject("currentDataYear");
watch(year, (val) => {
  console.log(val, "val");
  queryDailyWaterAvg(val);
});
const queryDailyWaterAvg = (year) => {
  let params = {
    year: year,
  };
  homeHttp.queryDailyWaterAvg(params).then((res) => {
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        item.month = item.month + "月";
      });
      let len = res.data.data.length;
      for (let i = 0; i < 6 - len; i++) {
        res.data.data.push({
          month: len + i + 1 + "月",
        });
      }
      chartDataList.value = res.data.data;
    }
  });
};
</script>

<style scoped></style>
